<template>
	<view>
		<u-form :model="form" ref="uForm" label-width='120' class="loginForm" :error-type="['toast']">
			<u-form-item label="" left-icon="account-fill" prop='username' :left-icon-style="iconStyle" style="border-bottom: rgb(230,230,230) solid 2rpx;">
				<u-input v-model="form.username" :placeholder="isLao?'ກະລຸນາໃສ່ບັນຊີ':'请输入快递员账号'" :trim="true" :custom-style="inputStyle" />
			</u-form-item>
			<u-form-item label="" left-icon="lock-fill" prop="password" :left-icon-style="iconStyle" style="border-bottom: rgb(230,230,230) solid 2rpx;">
				<u-input v-model="form.password" :placeholder="isLao?'ກະລຸນາໃສ່ລະຫັດຜ່ານ':'请输入密码'" :trim="true" type="password"
				 :custom-style="inputStyle" :password-icon="false" />
			</u-form-item>
			<view class="forgetBtn" @click="forget" :border-bottom="false" v-if="false">
				<view @click="forget" class="forgetBtnIn">
					<word word zh="忘记密码？" lao="ລືມລະຫັດຜ່ານ?"></word>
				</view>
			</view>
		</u-form>

		<view class="button-style">
			<u-button :loading="btnLoading" @click='submit' type="warning" throttleTime="500" hoverStayTime="100" :custom-style="loginBtn"
			 shape="circle" :ripple="true">
				<word v-show="!btnLoading" zh="登录" lao="ເຂົ້າ​ສູ່​ລະ​ບົບ"></word>
			</u-button>
		</view>
		<u-modal v-model="modalShow" :show-confirm-button="showConfirm" :show-cancel-button="showCancel" width="500rpx"
		 :cancel-text="isLao?'ຢືນຢັນ':'确认'" :title="modalTitle" @cancel="modalShow=false">
			<view style="height: 50rpx;width: 10rpx;"></view>
		</u-modal>
	</view>
</template>

<script>
	import {
		encrypt
	} from '@/utils/encrypt.js'
	import {
		isEmpty
	} from '@/utils/common.js'
	import Vue from 'vue'

	export default {
		computed: {
			isLao() {
				let isLao = this.$store.getters.isLao
				this.rules.username[0].message = isLao ? 'ກະລຸນາໃສ່ບັນຊີ' : '请输入账号'
				this.rules.password[0].message = isLao ? 'ກະລຸນາໃສ່ລະຫັດຜ່ານ' : '请输入密码'
				return isLao
			}
		},
		data() {
			return {
				modalShow: false,
				btnLoading: false,
				showConfirm: false,
				showCancel: true,
				modalTitle: '',
				inputStyle: {
					color: '#333',
					fontSize: '32rpx'
				},
				iconStyle: {
					color: '#666',
					fontSize: '36rpx'
				},
				loginBtn: {
					color: '#333',
					margin: '80rpx 42rpx 0',
					height: '100rpx',
					overflow: 'hidden',
					letterSpacing: '2rpx',
					fontSize: '36rpx',
					fontWeight: '500',
					backgroundImage: 'linear-gradient(to right, #F7B314, #F5D547)'
				},
				registerBtn: {
					color: '#333',
					margin: '32rpx 42rpx 0',
					height: '100rpx',
					overflow: 'hidden',
					letterSpacing: '2rpx',
					fontSize: '36rpx',
					fontWeight: '500',
				},
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: this.isLao ? 'ກະລຸນາໃສ່ບັນຊີ' : '请输入账号',
						trigger: 'blur,change'
					}],
					password: [{
						required: true,
						message: this.isLao ? 'ກະລຸນາໃສ່ລະຫັດຜ່ານ' : '请输入密码',
						trigger: 'blur,change'
					}]
				}
			}
		},
		created() {
			let u = this.$store.getters.username
			if (!isEmpty(u)) {
				this.form.username = u
			}
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					let data = {
						...this.form
					}
					data.password = encrypt(data.password)
					uni.showLoading();
					this.$api.loginApi(data)
						.then((res) => {
							uni.hideLoading();
							if (res.status === 200) {
								this.$store.dispatch('setToken', res.resultParam.token)
								this.$store.dispatch('setUser', res.resultParam.user.user)
								this.$store.dispatch('setUsername', data.username)
								setTimeout(() => {
									this.$api.getParentApi().then((result) => {
										this.$store.dispatch('setSite', result.resultParam.parent)
									})
									uni.switchTab({
										url: '/pages/person/index'
									})
								}, 500)
							} else {
								this.modalTitle = this.isLao ? 'ຊື່ຜູ້ໃຊ້ຫລືລະຫັດຜ່ານຜິດ' : '用户名或密码错误'
								this.modalShow = true
							}
						})
						.catch((err) => {
							uni.hideLoading();
						})
				});
			},
			forget() {
				this.$emit('switchMode', 'forget')
			}
		}
	}
</script>

<style lang="scss">
	.loginForm {
		padding: 140rpx 42rpx 0;
	}

	.forgetBtn {
		text-align: right;
		font-size: 32rpx;
		color: rgb(204, 204, 204);
		line-height: 1;
		margin-top: 40rpx;

		.forgetBtnIn {
			display: inline-block;
		}
	}
</style>
